﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>密码学发展时间线</title>

    <style>
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: normal 16px/1.5 'Titillium Web', sans-serif;
            background: linear-gradient(54deg, #9164ff, #8bfff4);
            color: #3c3f64;
            overflow-x: hidden;
            padding-bottom: 50px;
        }

        .timeline ul li {
            list-style-type: none;
            position: relative;
            width: 6px;
            margin: 0 auto;
            padding-top: 50px;
            background: #fff;
        }

            .timeline ul li::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%) rotate(45deg);
                width: 20px;
                height: 20px;
                z-index: 2;
                background: #eee;
            }

            .timeline ul li div {
                position: relative;
                bottom: 0;
                width: 400px;
                padding: 20px;
                background: #fff;
                box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
                border-radius: 5px;
                display: flex;
                align-items: center;
            }

                .timeline ul li div time {
                    position: absolute;
                    background: #f5af19;
                    width: 80px;
                    height: 30px;
                    top: -15px;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    letter-spacing: 2px;
                }

                .timeline ul li div div {
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }

                    .timeline ul li div div p {
                        text-align: center;
                    }

                .timeline ul li div .discovery {
                    margin-right: 10px;
                }

            .timeline ul li:nth-of-type(odd) > div {
                left: 45px;
            }

            .timeline ul li:nth-of-type(even) > div {
                left: -439px;
            }

            .timeline ul li div {
                visibility: hidden;
                opacity: 0;
                transition: all 0.5s ease-in-out;
            }

            .timeline ul li:nth-of-type(odd) div {
                transform: translate3d(100px, -10px, 0) rotate(10deg);
            }

            .timeline ul li:nth-of-type(even) div {
                transform: translate3d(-100px, -10px, 0) rotate(10deg);
            }

            .timeline ul li.in-view div {
                transform: none;
                visibility: visible;
                opacity: 1;
            }

        @media screen and (max-width: 900px) {
            .timeline ul li div {
                width: 250px;
                flex-direction: column;
            }

                .timeline ul li div div {
                    width: 80%;
                    margin: 10px;
                }

            .timeline ul li:nth-of-type(even) > div {
                left: -289px;
            }
        }

        @media screen and (max-width: 600px) {
            body {
                background: #8bfff4;
            }

            .timeline ul li {
                margin-left: 20px;
            }

                .timeline ul li div {
                    width: calc(100vw - 91px);
                }

                .timeline ul li:nth-of-type(even) > div {
                    left: 45px;
                }
        }
    </style>
</head>
<body>

     
    <section class="timeline">
        <ul>
		<li>
                <div>
                    <time> Times</time>
                    <div class="discovery">
                        <h1>密码学简介</h1>
                        <p>
                            古典密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../jian-crypto/dist/index.html'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
		<li>
                <div>
                    <time>500 BC</time>
                    <div class="discovery">
                        <h1>替换密码</h1>
                        <p>
                            古典密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../rot13/dist/index.html'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
			

            <li>
                <div>
                    <time>58 BC</time>
                    <div class="discovery">
                        <h1>镜像加密</h1>
                        <p>
                            古典密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../mirror/dist/index.html'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <time>100 BC</time>
                    <div class="discovery">
                        <h1>凯撒密码</h1>
                        <p>
                            古典密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../caesar/dist/index.html'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
			<li>
                <div>
                    <time>1553年</time>
                    <div class="discovery">
                        <h1>Vigenere</h1>
                        <p>
                            古典密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../vigenere/dist/index.html'>Read More</a></h1></span>        
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <time>1835年</time>
                    <div class="discovery">
                        <h1>摩斯密码</h1>
                        <p>
                            古典密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../morse/index.html'>Read More</a></h1></span>        
                    </div>
                </div>
            </li>
			            <li>
                <div>
                    <time>1967</time>
                    <div class="discovery">
                        <h1>ASCII</h1>
                        <p>
                            编码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../ascii/dist/index.html'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <time>1976年</time>
                    <div class="discovery">
                        <h1>DES</h1>
                        <p>
                            现代密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='https://baike.baidu.com/item/DES'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <time>1977年</time>
                    <div class="discovery">
                        <h1>RSA</h1>
                        <p>
                            现代密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../rsa/index.html'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
			<li>
                <div>
                    <time>1985</time>
                    <div class="discovery">
                        <h1>ECC</h1>
                        <p>
                            现代密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='https://baike.baidu.com/item/%E6%81%BA%E6%92%92%E5%AF%86%E7%A0%81/4905284?fromtitle=%E5%87%AF%E6%92%92%E5%AF%86%E7%A0%81&fromid=1336345&fr=aladdin'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
			<li>
                <div>
                    <time>1995年</time>
                    <div class="discovery">
                        <h1>SHA1</h1>
                        <p>
                            现代密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='https://baike.baidu.com/item/SHA%E5%AE%B6%E6%97%8F?fromtitle=SHA&fromid=9533316'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
			<li>
                <div>
                    <time>1998年</time>
                    <div class="discovery">
                        <h1>3DES</h1>
                        <p>
                            现代密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='https://baike.baidu.com/item/3DES'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <time>2001年</time>
                    <div class="discovery">
                        <h1>AES</h1>
                        <p>
                            现代密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='../aes/dist/index.html'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
            
            
            <li>
                <div>
                    <time>2012</time>
                    <div class="discovery">
                        <h1>SHA3</h1>
                        <p>
                            编码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='https://baike.baidu.com/item/%E6%81%BA%E6%92%92%E5%AF%86%E7%A0%81/4905284?fromtitle=%E5%87%AF%E6%92%92%E5%AF%86%E7%A0%81&fromid=1336345&fr=aladdin'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <time>2013</time>
                    <div class="discovery">
                        <h1>SM4</h1>
                        <p>
                            现代密码
                        </p>
                    </div>
                    <div class="scientist">
                        <span><h1><a href='https://baike.baidu.com/item/%E6%81%BA%E6%92%92%E5%AF%86%E7%A0%81/4905284?fromtitle=%E5%87%AF%E6%92%92%E5%AF%86%E7%A0%81&fromid=1336345&fr=aladdin'>Read More</a></h1></span>
                        
                    </div>
                </div>
            </li>
            
        </ul>
    </section>

    <script>
        var items = document.querySelectorAll(".timeline li");

        function isElementInViewport(el) {
            var rect = el.getBoundingClientRect();
            return (
              rect.top >= 0 &&
              rect.left >= 0 &&
              rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
              rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }

        function callbackFunc() {
            for (var i = 0; i < items.length; i++) {
                if (isElementInViewport(items[i])) {
                    if (!items[i].classList.contains("in-view")) {
                        items[i].classList.add("in-view");
                    }
                } else if (items[i].classList.contains("in-view")) {
                    items[i].classList.remove("in-view");
                }
            }
        }

        window.addEventListener("load", callbackFunc);
        window.addEventListener("scroll", callbackFunc);
    </script>

</body>
</html>
